<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>注册</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" type="text/css" media="screen" href="./css/signin.css" />
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
    <header>
        <div class="img"></div>
    </header>
    <div class="wrapper layer-signin">
        <div class="title">
            <span class="dec">距离注册通道关闭 </span> <span class="timer"> 06:20:52</span>
        </div>
        <div class="form-container">
            <!-- <form> -->
            <div class="cell phone-cell">
                <input class="c_inp phone-number" type="text" placeholder="手机号码">
                <div class="b-line"></div>
            </div>
            <div class="cell invite-code">
                <input class="c_inp" type="text" placeholder="邀请码">
                <div class="b-line"></div>
            </div>
            <div class="cell password-cell">
                <input class="c_inp password" type="password" placeholder="登录密码">
                <div class="b-line"></div>
            </div>
            <div class="cell password-cell comfirm-password-cell">
                <input class="c_inp comfirm-password" type="password" placeholder="确认登录密码">
                <div class="b-line"></div>
            </div>
            <div id="text-code" class="cell text-code err" attr(data-text)>
                <input class="c_inp" type="text" placeholder="短信验证码">
                <div class="b-line"></div>
            </div>
            <button id="btn-login" class="submit" type="submit">注 册</button>
            <!-- </form> -->
        </div>
        <div class="login-container">
            <div class=".reg"><span>已有账号，</span><a href="login.html">登录</a></div>
        </div>
    </div>

    <div class="waraper layer-timer">
        <div class="title1">
            <span class="dec">每天不定时开启限量注册</span>
        </div>
        <div class="title2">
            <span class="dec">倒计时</span>
        </div>

        <div class="timer-board">
            <div class="num h">0</div>
            <div class="num h">1</div>
            <div class="dot">:</div>
            <div class="num m">4</div>
            <div class="num m">1</div>
            <div class="dot">:</div>
            <div class="num s">0</div>
            <div class="num s">9</div>
        </div>

        <div class="login-container">
            <div class=".reg"><span>已有账号，</span><a href="">登录</a></div>
        </div>
    </div>

    <div class="layer-finished">
        <div class="tip">
            <span class="des">下次注册开启时间：</span><span class="start-time">2018-09-11 13:00</span>~<span class="end-time">13:10</span>
        </div>

        <div class="counter">
            <span class="minute">10</span>分<span class="second">20</span>秒
        </div>
        <div class="des1">
            <span class="places">200</span>个名额已被抢光
        </div>
        <div class="des2">
            请在下次注册时间窗口注册
        </div>
        <div class="login-container">
            <div class=".reg"><span>已有账号，</span><a href="">登录</a></div>
        </div>
    </div>

    <div class="layer-reg-ok">
        <div class="icon">
        </div>
        <div class="text-ok">注册成功</div>
        <div class="text-open">开启人工智能之旅</div>
    </div>
    <script>
        $(document).ready(function () {

            $('#text-code').attr('data-text', '已发送(60s)')

            $("[data-text]").click(function () {
                console.log('发送验证码');
                console.log($(this));
            })
            $("#btn-login").click(function () {
                $(".layer-signin").hide();
                $(".layer-timer").hide();
                $(".layer-finished").hide();
                $(".layer-reg-ok").show();
            })

            //清空电话
            $(".phone-cell").click(function (ev) {
                if (ev.target.className.indexOf('phone-cell') !== -1) {
                    console.log(ev.target.children);
                    console.log('电话号码已清空');
                    ev.target.children[0].value = "";
                }
            })
            //密码显示与隐藏
            $(".password-cell").click(function (ev) {
                if (ev.target.className.indexOf('password-cell') !== -1) {
                    var that = $(this);
                    var inp = that.find('input');
                    var type = inp.prop("type");
                    inp.prop("type", type === "text" ? 'password' : 'text');

                }
            })
            
            
        })
    </script>
</body>

</html>